import React, { useEffect, useRef, useState } from 'react';
import { Breadcrumb, Button, Card, Input, Radio, Form, Space, Upload, Modal, message } from 'antd';
import { Link } from 'react-router-dom';
import Channel from 'components/Channel';
import ReactQuill from 'react-quill';
import 'react-quill/dist/quill.snow.css';
import styles from './index.module.scss';
import { UploadOutlined } from '@ant-design/icons';
import { getToken } from 'utils/storage';
import { baseURL } from 'utils/request';
import { useHistory } from 'react-router-dom';
import { editArticlesAPI, getArticlesByIdAPI, publicArticlesAPI } from 'api/article';
import { useParams } from 'react-router-dom';

export default function ArticlePublic(_props) {
  // 获取路由传过来的id
  // const { id } = _props.match.params; // 普通方式
  const { id } = useParams(); // hooks 方式
  // 获取history  --hooks
  const history = useHistory();
  // Ref
  const draftRef = useRef(false);
  const formRef = useRef(null);
  // useState状态
  const [imgUrl, setImgUrl] = useState('');
  const [fileList, setFileList] = useState([]);
  const [type, setType] = useState(1);
  // 根据id获取文章信息
  const getArticlesByid = async (id) => {
    const res = await getArticlesByIdAPI(id);
    const type = res.data.cover.type;
    // 回填数据  form的setFieldsValue
    formRef.current.setFieldsValue({ ...res.data, type });
    // 上传图片的 type
    setType(type);
    // 有图显示 设置fileList
    setFileList(res.data.cover.images.map((item) => ({ url: item })));
  };

  useEffect(() => {
    if (id) {
      getArticlesByid(id);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  // 发布 编辑
  const handlePublic = async (values) => {
    const formData = { ...values };
    formData.cover = {
      type: type,
      images: type === 0 ? [] : showFileList.map((item) => item.url || item.response.data.url),
    };
    delete formData.type;
    if (fileList.length < type) {
      message.warning('图片数量不对');
      return;
    }
    if (id) {
      // 编辑
      await editArticlesAPI({ id, ...formData }, draftRef.current);
      message.success('编辑成功');
    } else {
      // 发布
      // 将draft判断是否为草稿
      await publicArticlesAPI(formData, draftRef.current);
      message.success('发布成功');
    }

    // 跳转路由
    history.push('/list');
  };
  // 段值更新时触发回调事件
  const onValuesChange = (changedValues, allValues) => {
    if (changedValues.type !== undefined) {
      setType(changedValues.type);
    }
  };
  // 定义计算属性  保存显示页面显示的图片信息
  const showFileList = fileList.filter((item, index) => {
    if (type === 0) return false; // 切换type：0 显示图片无
    if (type === 1) return index === 0; // type：1 显示第一张
    return true; // type：3 全部显示
  });
  const props = {
    // 显示默认支持的文件类型
    accept: '.jpg,.png,.jpeg',
    // 上传文件类型
    name: 'image',
    // 上传的服务器
    action: `${baseURL}/v1_0/upload`,
    headers: {
      authorization: `Bearer ${getToken()}`,
    },
    onChange(info) {
      setFileList(info.fileList);
      // if (info.file.status !== 'uploading') {
      //   console.log(info.file, info.fileList);
      // }
      if (info.file.status === 'done') {
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
    onPreview(file) {
      // 新增和编辑时预览
      setImgUrl(file.url || file.thumbUrl);
    },
    // 上传文件之前的钩子
    beforeUpload(file) {
      const allowFileType = ['image/jpeg', 'image/jpg', 'image/png'];
      if (!allowFileType.includes(file.type)) {
        message.warning('不允许上传的文件类型');
        // 阻止上传，并且不显示在前端界面上
        return Upload.LIST_IGNORE;
        // 阻止上传，但是会显示在前端界面
        // return false;
      }
    },
  };
  return (
    <div style={{ paddingTop: 24 }} className={styles.root}>
      <Card
        title={
          <Breadcrumb>
            <Breadcrumb.Item>
              <Link to="/home">首页</Link>
            </Breadcrumb.Item>
            <Breadcrumb.Item>{id ? '编辑' : '发布'}文章</Breadcrumb.Item>
          </Breadcrumb>
        }
      >
        <Form
          ref={formRef}
          size="large"
          name="basic"
          autoComplete="off"
          labelCol={{ span: 4 }}
          onFinish={handlePublic}
          onValuesChange={onValuesChange}
          initialValues={{
            channel_id: 0,
            type: 1,
            // 富文本设置了name属性要配合初始值
            content: '',
          }}
        >
          <Form.Item
            label="标题"
            name="title"
            rules={[
              {
                required: true,
                message: '标题不能为空',
              },
            ]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="频道"
            name="channel_id"
            rules={[
              {
                required: true,
                message: '频道不能为空',
              },
            ]}
          >
            <Channel style={{ width: 200 }}></Channel>
          </Form.Item>

          <Form.Item
            label="内容"
            name="content"
            rules={[
              {
                required: true,
                message: '内容不能为空',
              },
              {
                validator: (_, value) => {
                  // 内容为空自带标签，需要自定义校验
                  if (value === '<p><br></p>') {
                    return Promise.reject(new Error('内容不能为空'));
                  }
                  return Promise.resolve();
                },
              },
            ]}
          >
            {/* FormItem会自动控制ReactQill为受控组件 */}
            <ReactQuill theme="snow" placeholder="请输入文章内容..."></ReactQuill>
          </Form.Item>

          <Form.Item label="封面" name="type">
            <Radio.Group>
              <Radio value={1}>单图</Radio>
              <Radio value={3}>三图</Radio>
              <Radio value={0}>无图</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item wrapperCol={{ offset: 4 }}>
            <Upload {...props} listType="picture-card" fileList={showFileList}>
              {/* 判断fileList的长度 */}
              {fileList.length < type && <Button icon={<UploadOutlined />}></Button>}
            </Upload>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 4 }}>
            <Space>
              <Button type="primary" htmlType="submit">
                {id ? '编辑' : '发布'}文章
              </Button>
              <Button type="dashed" htmlType="submit" onClick={() => (draftRef.current = true)}>
                存入草稿
              </Button>
            </Space>
          </Form.Item>
        </Form>
      </Card>
      <Modal
        footer={null}
        centered
        title="预览图片"
        // !!imgUrl  语法 相当于 Boolean(imgUrl)
        visible={!!imgUrl}
        onCancel={() => setImgUrl('')}
      >
        <img width={450} src={imgUrl} alt="" style={{ marginLeft: 10 }} />
      </Modal>
    </div>
  );
}
